<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      label-position="right"
      :inline="true"
      label-width="70px"
    >
 
	  <el-form-item label="产品" prop="productId">
		<el-select
		  v-model="queryParams.productId"
		  clearable
		  filterable
		  placeholder="请选择产品"
		  class="!w-200px"
		>
		  <el-option
			v-for="item in productList"
			:key="item.id"
			:label="item.name"
			:value="item.id"
		  />
		</el-select>
	  </el-form-item>

	  <el-form-item label="订单时间" prop="orderTime">
		<el-date-picker
		  v-model="queryParams.orderTime"
		  value-format="YYYY-MM-DD HH:mm:ss"
		  type="daterange"
		  start-placeholder="开始日期"
		  end-placeholder="结束日期"
		  :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
		  class="!w-220px"
		/>
	  </el-form-item>

	  <el-form-item label="供应商" prop="supplierId">
		<el-select
		  v-model="queryParams.supplierId"
		  clearable
		  filterable
		  placeholder="请选择供供应商"
		  class="!w-200px"
		>
		  <el-option
			v-for="item in supplierList"
			:key="item.id"
			:label="item.name"
			:value="item.id"
		  />
		</el-select>
	  </el-form-item>
	  <el-form-item label="车型" prop="typeCar">
	    <el-input v-model="queryParams.typeCar" style="width: 200px" placeholder="请输入车型"/>
	  </el-form-item>
	  <el-form-item label="工厂名称" prop="factoryName">
	    <el-input v-model="queryParams.factoryName" style="width: 200px" placeholder="请输入工厂名称"/>
	  </el-form-item>
	  <el-form-item label="VIN" prop="vin">
	    <el-input v-model="queryParams.vin" style="width: 200px" placeholder="请输入VIN"/>
	  </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['erp:purchase-order:create']"
        >
          <Icon icon="ep:plus" class="mr-5px"/>
          新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['erp:purchase-order:export']"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导出
        </el-button>
        <el-button
          type="danger"
          plain
          @click="handleDelete(selectionList.map((item) => item.id))"
          v-hasPermi="['erp:purchase-order:delete']"
          :disabled="selectionList.length === 0"
        >
          <Icon icon="ep:delete" class="mr-5px"/>
          删除
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table
      border
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
      @selection-change="handleSelectionChange"
    >

      <el-table-column label="操作" width="60" fixed="left" align="center" prop="payStatus">
        <template #default="scope">
          <el-popover :visible="popoverVisible == scope.row.id" placement="top" :width="100">

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  @click="openForm('detail', scope.row.id)"
                  v-hasPermi="['erp:purchase-order:query']"
                >
                  详情
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  @click="lookPurchaseIn(scope.row.id)"
                  v-hasPermi="['erp:purchase-order:query']"
                >
                  查询入库
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  type="primary"
                  @click="openForm('update', scope.row.id)"
                  v-hasPermi="['erp:purchase-order:update']"
                  :disabled="scope.row.status === 20"
                >
                  编辑
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px"  v-if="scope.row.status === 10">
              <el-col :span="24">
                <el-button
                  link
                  type="primary"
                  @click="handleUpdateStatus(scope.row.id, 20)"
                  v-hasPermi="['erp:purchase-order:update-status']"
                >
                  审批
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px"   v-else>
              <el-col :span="24">
                <el-button
                  link
                  type="danger"
                  @click="handleUpdateStatus(scope.row.id, 10)"
                  v-hasPermi="['erp:purchase-order:update-status']"
                >
                  反审批
                </el-button>
              </el-col>
            </el-row>

            <el-row class="mb-8px">
              <el-col :span="24">
                <el-button
                  link
                  type="danger"
                  @click="handleDelete([scope.row.id])"
                  v-hasPermi="['erp:purchase-order:delete']"
                >
                  删除
                </el-button>
              </el-col>
            </el-row>

            <div class="popoverCloseBtn" @click="closePopover()">关闭</div>
            <template #reference>
              <img src="@/assets/imgs/more_edit.png" @click="openForm('update', scope.row.id)"   @contextmenu.prevent="handleRightClick(scope.row.id)"   class="linkBtn"/>
<!--              @click="openPopoverVisible(scope.row.id)"-->
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column fixed="left"
        label="订单时间"
        align="center"
        prop="orderTime"
        :formatter="dateFormatter2"
        width="120px"
      />
      <el-table-column label="供应商" fixed="left" prop="supplierName"/>

      <el-table-column label="产品名称" fixed="left" prop="productNames" min-width="150">
        <template #default="scope">

          <dev
            v-for="(item, index) in scope.row.items"
            :key="index"
            style="margin-right: 5px;display: block;vertical-align: middle;line-height: 20px;margin-bottom: 10px;"
          >
<!--            【{{ item.brandName }}】{{ item.productName }}{{ item.businessTypeName }}-->
            <span v-if="item.brandName != null && item.brandName.length>0">
              【{{ item.brandName }}】
            </span>
            {{ item.productName }}
            <span v-if="item.businessTypeName != null && item.businessTypeName.length>0">
              {{ item.businessTypeName }}
            </span>
          </dev>
        </template>
      </el-table-column>


      <el-table-column fixed="left"
        label="总数量"
        align="center"
        prop="totalCount"
        :width="70"
        :formatter="erpCountTableColumnFormatter"
      />
      <el-table-column fixed="left"
        label="入库数量"
        align="center"
        :width="90"
        prop="inCount"
        :formatter="erpCountTableColumnFormatter"
      />
      <el-table-column fixed="left"
        label="退货数量"
        :width="90"
        align="center"
        prop="returnCount"
        :formatter="erpCountTableColumnFormatter"
      />
      <el-table-column fixed="left"
        label="金额合计"
        :width="90"
        align="center"
        prop="totalProductPrice"
        :formatter="erpPriceTableColumnFormatter"
      />
<!--      <el-table-column-->
<!--        label="含税金额"-->
<!--        align="center"-->
<!--        prop="totalPrice"-->
<!--        :formatter="erpPriceTableColumnFormatter"-->
<!--      />-->
      <el-table-column
        label="支付订金"
        align="center"
        :width="90"
        prop="depositPrice"
        :formatter="erpPriceTableColumnFormatter"
      />
      <el-table-column label="状态" align="center"  width="100" prop="status">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.ERP_AUDIT_STATUS" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column min-width="100" label="订单单号" align="center" prop="no"/>
      <el-table-column label="创建人" min-width="60" align="center" prop="creatorName"/>
<!--      <el-table-column label="操作" align="center" fixed="right" width="220">-->
<!--        <template #default="scope">-->
<!--          <el-button-->
<!--            link-->
<!--            @click="openForm('detail', scope.row.id)"-->
<!--            v-hasPermi="['erp:purchase-order:query']"-->
<!--          >-->
<!--            详情-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="primary"-->
<!--            @click="openForm('update', scope.row.id)"-->
<!--            v-hasPermi="['erp:purchase-order:update']"-->
<!--            :disabled="scope.row.status === 20"-->
<!--          >-->
<!--            编辑-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="primary"-->
<!--            @click="handleUpdateStatus(scope.row.id, 20)"-->
<!--            v-hasPermi="['erp:purchase-order:update-status']"-->
<!--            v-if="scope.row.status === 10"-->
<!--          >-->
<!--            审批-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="danger"-->
<!--            @click="handleUpdateStatus(scope.row.id, 10)"-->
<!--            v-hasPermi="['erp:purchase-order:update-status']"-->
<!--            v-else-->
<!--          >-->
<!--            反审批-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            link-->
<!--            type="danger"-->
<!--            @click="handleDelete([scope.row.id])"-->
<!--            v-hasPermi="['erp:purchase-order:delete']"-->
<!--          >-->
<!--            删除-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->

    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <PurchaseOrderForm ref="formRef" :productIds="productIds" @success="getList"/>
</template>

<script setup lang="ts">
import {getIntDictOptions, DICT_TYPE} from '@/utils/dict'
import {dateFormatter2} from '@/utils/formatTime'
import download from '@/utils/download'
import {PurchaseOrderApi, PurchaseOrderVO} from '@/api/erp/purchase/order'
import PurchaseOrderForm from './PurchaseOrderForm.vue'
import {ProductApi, ProductVO} from '@/api/erp/product/product'
import {UserVO} from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import {erpCountTableColumnFormatter, erpPriceTableColumnFormatter} from '@/utils'
import {SupplierApi, SupplierVO} from '@/api/erp/purchase/supplier'
import {ElLoading} from "element-plus";
import {PurchaseInApi} from "@/api/erp/purchase/in";


/** ERP 销售订单列表 */
defineOptions({name: 'ErpPurchaseOrder'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const popoverVisible = ref();

const loading = ref(true) // 列表的加载中
const list = ref<PurchaseOrderVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  no: undefined,
  supplierId: undefined,
  productId: undefined,
  orderTime: [],
  ids:[],
  status: undefined,
  remark: undefined,
  creator: undefined,
  inStatus: undefined,
  returnStatus: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中
const productList = ref<ProductVO[]>([]) // 产品列表
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const userList = ref<UserVO[]>([]) // 用户列表

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await PurchaseOrderApi.getPurchaseOrderPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const {push} = useRouter()
const lookPurchaseIn = async (id) => {
  const loading = ElLoading.service({
    lock: true,
    text: '查询中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  try {
    const data = await PurchaseInApi.getByPurchaseOrderId(id);
    push({
      path: "/erp/purchase/in",
      query: {doType: "query", data: data}
    });
  } finally {
    loading.close();
  }
}


const openPopoverVisible = async (id) => {
  popoverVisible.value = id;
}
const closePopover = async () => {
  popoverVisible.value = null;
}
const handleRightClick = (id) => {
  popoverVisible.value = id;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.ids = [];
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {

  //加载中
  const loading = ElLoading.service({
    lock: true,
    text: '查询中...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  try {
    formRef.value.open(type, id)
    popoverVisible.value = null;
  }finally {
    loading.close();
  }

}
const route = useRoute();
const productIds = ref([]);
//监听formRef.value
watch(formRef, () => {
  if (formRef.value != undefined) {
    let ids = route.query.saleOrderItem;
    if (ids != undefined && ids != '') {
      productIds.value = ids.split(',');
      formRef.value.open("create", null)
    }
  }
})


/** 删除按钮操作 */
const handleDelete = async (ids: number[]) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await PurchaseOrderApi.deletePurchaseOrder(ids)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
    selectionList.value = selectionList.value.filter((item) => !ids.includes(item.id))
  } catch {
  }
}

/** 审批/反审批操作 */
const handleUpdateStatus = async (id: number, status: number) => {
  try {
    // 审批的二次确认
    await message.confirm(`确定${status === 20 ? '审批' : '反审批'}该订单吗？`)
    // 发起审批
    await PurchaseOrderApi.updatePurchaseOrderStatus(id, status)
    message.success(`${status === 20 ? '审批' : '反审批'}成功`)
    // 刷新列表
    await getList()
  } catch {
  }
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await PurchaseOrderApi.exportPurchaseOrder(queryParams)
    download.excel(data, '销售订单.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 选中操作 */
const selectionList = ref<PurchaseOrderVO[]>([])
const handleSelectionChange = (rows: PurchaseOrderVO[]) => {
  selectionList.value = rows
}

/** 初始化 **/
onMounted(async () => {


  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }
  handleQuery();

  // 加载产品、仓库列表、供应商
  productList.value = await ProductApi.getProductSimpleList()
  for (let i = 0; i < productList.value.length; i++){
    productList.value[i].name = "【"+productList.value[i].brandName +"】"+ productList.value[i].name+productList.value[i].businessTypeName
  }
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  userList.value = await UserApi.getSimpleUserList()
})
onActivated(() => {

  let query = route.query;
  if (query.doType == 'query') {
    queryParams.ids = query.data;
  }
  popoverVisible.value = null;
  getList()
});
</script>
